<template>
  <div id="box">
    <div class="head">
      <img
        src="../../public/2.webp"
        alt=""
        style="width: 100%; height: 150px"
      />
    </div>
    <div class="avater">
      <div style="width: 80; height: 80px">
        <img
          src="../../public/1.webp"
          alt=""
          style="width: 80px; height: 80px; border-radius: 50%"
        />
      </div>
      <div style="width: 80%; height: 80px">
        <div class="nickname">{{ state.nickname }}</div>
        <div class="age">{{ state.age }}</div>
      </div>
    </div>
    <div class="nav">
      <div class="nav-item" v-for="item in list" :key="item">
        <div class="nav-block">0</div>
        <div class="nav-block">{{ item }}</div>
      </div>
    </div>
    <div class="foot">
      <div class="foot-box"></div>
      <div class="foot-card" style="display: flex">
        <div class="foot-item"></div>
        <div class="foot-item"></div>
      </div>
    </div>
      <el-card class="box-card">
      <template #header>
        <div
          class="card-header"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <span>我的资料</span>
          <el-button class="button" type="text">修改资料</el-button>
        </div>
      </template>
      <div v-for="(item, index) in state" :key="index" class="text item">
        {{ index }}: {{item}}
      </div>
      </el-card>
  </div>
</template>

<script>
import { ref, reactive, onMounted, } from "vue";
import {detail} from '../api'

export default {
  setup() {
    const list = reactive(["好友", "有感我的", "我有感的", "看过我的"]);
    const state = reactive({
      nickname: "fxburning",
      age: "18",
      height: 180,
      area: '陕西 西安',
      motto: '个性签名'
    });
    onMounted(async () => {
      const userId = localStorage.getItem('userId')
      const params = reactive({
        'userId': userId
      })
      const res = await detail(params)
      console.log(res) 
    })
    const active = ref(0);
    return {
      active,
      state,
      list,
    };
  },
};
</script>

<style scoped>
.box-card{
  padding-bottom: 50px;
}
#box {
  width: 100%;
  height: 600px;
}
.nickname {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid gray;
}
.age {
  width: 100%;
  height: 40px;
}
.avater {
  width: 100%;
  height: 80px;
  overflow: hidden;
  display: flex;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.head {
  width: 100%;
  height: 25%;
}
.nav {
  margin-top: 10px;
  width: 100%;
  height: 10%;
  display: flex;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.nav-item {
  flex: 1;
  width: 20%;
  height: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.nav-block {
  width: 100%;
  height: 50%;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
}
.foot {
  width: 100%;
  height: 25%;
  border-top: 2px solid #f2f6fc;
}
.foot-box {
  margin: 10px auto 10px;
  width: 92%;
  height: 40%;
  border-radius: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.foot.card {
  margin: 2% 2% 2% 2%;
  width: 96%;
  height: 40%;
}
.foot-item {
  width: 40%;
  height: 40px;
  margin: 0 5% 0;
  border: 1px solid #f2f6fc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.bottom {
  width: 100%;
  height: 25%;
  border-top: 2px solid black;
}
</style>